<template>
  <div class="main">
    <div>
      <el-tabs v-model="activeTab" @tab-change="handleChange">
        <el-tab-pane label="请选择-->" name="blank">
          <div style="display: flex; justify-content: center; padding-top: 10vh">
            <div style="text-align: center">
              <img src="/svg/crud.svg" alt="" />
              <div style="font-size: 2em; padding: 1rem"> 单表的简单增删改查演示 </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="新闻管理" name="news"></el-tab-pane>
        <el-tab-pane label="公告管理" name="billboard"></el-tab-pane>
        <el-tab-pane label="足球俱乐部管理" name="footballteam"></el-tab-pane>
      </el-tabs>
    </div>
    <div>
      <RouterView></RouterView>
    </div>
    <BackToHome></BackToHome>
  </div>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElTabs, ElTabPane, TabPaneName } from 'element-plus'
// 路由
import { useRouter, useRoute } from 'vue-router'
import { log } from '../../ts/logger'
const router = useRouter()
const route = useRoute()
//#endregion

import BackToHome from '../../components/BackToHomeComp.vue'

const basePath = '/basic/crud'
let routename = route.path.replace(basePath, '')
routename = routename ? routename.substring(1) : 'blank'
log.debug('======>', route.path, routename)
const activeTab = ref(routename)

const handleChange = (tabName: TabPaneName) => {
  log.debug(tabName)
  if (tabName == 'blank') {
    router.push(`${basePath}`)
  } else {
    router.push(`${basePath}/${tabName}`)
  }
}
</script>
<style scoped lang="scss">
.main {
  padding: 1rem;
}
</style>
